import { useState, useEffect } from "react";
import { Button, Form, Input, Space } from "antd";
import classnames from "classnames";
import _ from 'lodash';
import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
import styles from './index.less';

const initDataList = [
  {
    id: _.uniqueId('label_'),
    label: '标签1',
  },
  {
    id: _.uniqueId('label_'),
    label: '标签2',
  },
  {
    id: _.uniqueId('label_'),
    label: '标签3',
  }
]
interface Props {
  onChange: (data: { id: string, label: string }[]) => void;
}
const MoreLabel: React.FC<Props> = ({ onChange }) => {
  const [dataList, setDataList] = useState<{ id: string, label: string }[]>(initDataList)
  const addItem = () => {
    setDataList(dataList.concat({
      id: _.uniqueId('label_'),
      label: '标签页',
    }))
  }
  const deleteItem = (id: string) => {
    setDataList(dataList.filter(n => n.id !== id));
  }
  useEffect(() => {
    onChange(dataList);
  }, [dataList, onChange]);
  return (
    <div>
      {dataList.map((item: { id: string, label: string }, index: number) => (
        <Space key={item.id} className={styles.itemPanel} align="baseline">
          <Input value={item.label} onChange={(e) => {
            const list = [...dataList];
            console.log(e.target.value)
            list[index].label = e.target.value;
            setDataList(list);
          }} placeholder="标签名称" />
          <DeleteOutlined className={classnames(styles.delIcon, {
            [styles.disibleDel]: dataList.length <= 2
          })} onClick={() => dataList.length > 2 && deleteItem(item.id)} />
        </Space>
      ))}
      <Form.Item>
        <Button type='link' onClick={addItem} icon={<PlusOutlined />}>
          添加标签页
        </Button>
      </Form.Item>
    </div>
  )
}

export default MoreLabel;
